<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/animations/ripple-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/hero-animation.html">

<dom-module id="simulation-info">
    <template>
        <style>
            :host {
                display: block;
            }

        </style>

        <table>
            <tr><td><span>ID:</span></td><td><span>{{sim.id}}</span></td></tr>
            <tr><td><span>Name:</span></td><td><span>{{sim.name}}</span></td></tr>
            <tr><td><span>Partitioning:</span></td><td><span>{{sim.partitioning}}</span></td></tr>
            <tr><td><span>Num. of Cells:</span></td><td><span>{{sim.num_cell}}</span></td></tr>
            <tr><td><span>Num. of Worker:</span></td><td><span>{{sim.num_worker}}</span></td></tr>
            <tr><td><span>Num. of Agents:</span></td><td><span>{{sim.numAgents}}</span></td></tr>
            <tr><td><span>Start:</span></td><td><span id="time">{{sim.start}}</span></td></tr>
            <tr><td><span>Steps:</span></td><td><span id="step">{{sim.step}}</span></td></tr>
        </table>

    </template>
</dom-module>

<script>
    Polymer({
        is: 'simulation-info',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],

        properties: {
            sim:{
                type: Object
            },
            animationConfig: {
                type: Object,
                value: function() {
                    return {
                        'exit': [{
                            name: 'ripple-animation',
                            id: 'ripple',
                            fromPage: this
                        },
                            {
                                name: 'hero-animation',
                                id: 'hero',
                                fromPage: this
                            }]
                    }
                }
            }
        },

        listeners: {
            click: '_onClick'
        },

        observers: [
                'fireSimulation(sim)'
        ],

        _onClick: function(event) {
            if(this.sim.status.toLowerCase()=="created")
                return;
            var target = event.target;

            while(target.tagName.toLowerCase() != "simulation-info")
                target = target.parentElement;

            // configure the page animation
            this.sharedElements = {
                'hero': target,
                'ripple': target
            };
            this.animationConfig['exit'][0].gesture = {
                x: event.x || event.pageX,
                y: event.y || event.pageY
            };
            this.fire('tile-click', {
                tile: target,
                data: this.sim
            });
        },

        fireSimulation: function(sim){ // this event updates simulation info also in full-size-page-with-card component
            this.fire('update-sim-event', {
                tile: document.querySelector('dom-module[id="simulation-info"]'),
                data: sim
            });
        }

    });
</script>